<template>
  <el-container>
    <el-header>
      <div style="margin-top: 20px;">
      <el-page-header @back="goBack">
        <template slot="title">
          返回应用列表
        </template>
        <template slot="content">
          当前应用：{{ `${appItem.appName}[${appItem.appId}]` }}
          应用程序路径：{{ appItem.fullPath }}
        </template>
      </el-page-header>
      </div>
    </el-header>
    <el-main>
      <el-table height="100%" :data="dataTable.result" border style="width: 100%" highlight-current-row>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table :data="scope.row.actions" border style="width: 95%; margin: auto;" highlight-current-row>
              <!-- <el-table-column prop="actionId" label="功能代码" width="150" ></el-table-column> -->
              <el-table-column prop="actionName" label="功能名" width="150" show-overflow-tooltip></el-table-column>
              <el-table-column prop="fullUri" label="功能全路径"  show-overflow-tooltip></el-table-column>
              <el-table-column prop="createTime" label="创建时间" header-align="center" align="center" width="200"></el-table-column>
              <el-table-column prop="updateTime" label="修改时间" header-align="center" align="center" width="200"></el-table-column>
              <el-table-column header-align="center" align="center" width="80" fixed="right">
                <template slot="header">
                  <el-button type="text" icon="el-icon-plus" @click="addAction(scope.row)" title="新增" ></el-button>
                  <el-button type="text" icon="el-icon-refresh" @click="getModuleActions(scope.row)" title="刷新" ></el-button>
                </template>
                <template slot-scope="props">
                  <el-button type="text" icon="el-icon-edit" @click="editAction(scope.row, props.row)" title="编辑"></el-button>
                  <el-button type="text" icon="el-icon-delete" @click="removection(scope.row, props.row)" title="删除"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="appId" label="应用程序代码" width="150" ></el-table-column> -->
        <el-table-column prop="icon" width="50" header-align="center" align="center">
          <template slot-scope="scope">
            <i :class="scope.row.icon"></i>
          </template>
        </el-table-column>
        <el-table-column prop="moduleName" label="模块名/路径" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.moduleName }}<br>
            {{ scope.row.fullUri }}
          </template>
        </el-table-column>
        <el-table-column prop="isPublic" label="公开访问"  width="70" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button :type="scope.row.isPublic? 'success': 'info'" :icon="scope.row.isPublic? 'el-icon-check': 'el-icon-close'" circle></el-button>
          </template>
        </el-table-column>
        <el-table-column prop="enabled" label="启用" width="80" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button :type="scope.row.enabled? 'success': 'info'" :icon="scope.row.enabled? 'el-icon-check': 'el-icon-close'" circle></el-button>
          </template>
        </el-table-column>
        <el-table-column prop="openMode" label="打开方式" width="80">
          <template slot-scope="scope">
            {{ openMode.singleOrDefault(t=>t.value == scope.row.openMode).label }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间/修改时间" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            {{ scope.row.createTime }}<br>
            {{ scope.row.updateTime }}
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" width="80" fixed="right">
          <template slot="header">
            <el-button type="text" icon="el-icon-plus" @click="add" title="新增" ></el-button>
            <el-button type="text" icon="el-icon-refresh" @click="query" title="刷新" ></el-button>
          </template>
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="edit(scope.row)" title="编辑"></el-button>
            <el-button type="text" icon="el-icon-delete" @click="remove(scope.row)" title="删除"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-drawer :title="formTitle" :visible.sync="showEdit" @close="closeDialog" direction="rtl" size="50%">
        <template slot="title">
          <div>
            <el-button @click="showEdit = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </div>
        </template>
        <el-container>
          <el-main>
            <el-form :model="editItem" label-width="100px">
              <el-form-item label="模块名">
                <el-input v-model="editItem.moduleName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="模块uri">
                <el-input v-model="editItem.uri" autocomplete="off">
                  <template slot="prepend">{{appItem.fullPath}}</template>
                </el-input>
              </el-form-item>
              <el-form-item label="完整路径">
                <el-input :value="appItem.fullPath + editItem.uri" :disabled="true" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="参数">
                <el-input v-model="editItem.queryString" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="公开访问">
                <el-checkbox v-model="editItem.isPublic"></el-checkbox>
              </el-form-item>
              <el-form-item label="打开方式">
                <el-select v-model="editItem.openMode" placeholder="请选择用户状态">
                  <el-option v-for="mode in openMode" :key="mode.value" :label="mode.label" :value="mode.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="启用">
                <el-checkbox v-model="editItem.enabled"></el-checkbox>
              </el-form-item>
              <el-form-item label="图标">
                <mf-icon-list v-model="editItem.icon"></mf-icon-list>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>

      </el-drawer>

      <el-dialog :title="`${newAction?'新建':'编辑'}模块功能信息`" :visible.sync="showActionEdit" :close-on-click-modal="false" @closed="actionEditorClosed">
        <el-form :model="currentModuleActionDto" label-width="100px">
          <el-form-item label="关联模块">
            <el-input :value="currentModule.moduleName" :disabled="true" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="功能名称">
            <el-input v-model="currentModuleActionDto.actionName" ></el-input>
          </el-form-item>
          <el-form-item label="功能uri">
            <el-input v-model="currentModuleActionDto.uri" autocomplete="off">
              <template slot="prepend">{{currentModule.fullPath}}</template>
            </el-input>
          </el-form-item>
          <el-form-item label="完整路径">
            <el-input :value="currentModule.fullPath + currentModuleActionDto.uri" :disabled="true" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="showActionEdit = false">取 消</el-button>
          <el-button type="primary" @click="saveAction">保 存</el-button>
        </div>
      </el-dialog>

    </el-main>
    <el-footer>
      <el-pagination v-on:current-change="query" :current-page.sync="queryObject.pageIndex" :page-size="queryObject.pageSize" layout="total, prev, pager, next" :total="dataTable.rowCount" ></el-pagination>
    </el-footer>
  </el-container>
</template>
<script>
import {mapState, mapMutations, mapActions} from 'vuex';
const STORE_MODULE = {
  "name": "module",
  "state": [
    "openMode",
    "queryObject",
    "dataTable"
  ],
  "mutations": [
  ],
  "actions": [
    "query",
    "create",
    "update",
    "delete"
  ]
};
export default {
  data() {
    return {
      createNew: true,
      showEdit: false,
      appId: null,
      appItem: {
        appId: null,
        appName: null,
        fullPath: null
      },
      editItem: {
        moduleId: null,
        appId: null,
        moduleName: null,
        uri: null,
        isPublic: null,
        enabled: null,
        queryString: null,
        icon: null,
        openMode: null
      },
      keyword: null,
      currentModule: {

      },
      currentModuleActionDto: {
        actionId: null,
        actionName: null,
        uri: null,
        moduleId: null
      },
      newAction: false,
      showActionEdit: false
    }
  },
  computed: {
    ...mapState(STORE_MODULE.name, STORE_MODULE.state),
    formTitle(){
      return this.createNew ? "新建":"编辑";
    }
  },
  created() {
    this.appId = this.$route.params.id;
    this.$service.app.item({params:{id:this.appId}}).then(r => {
      if (r.success) {
        this.appItem = r.data;
        this.searchData();
      }
    });
  },
  methods: {
    ...mapMutations(STORE_MODULE.name, STORE_MODULE.mutations),
    ...mapActions(STORE_MODULE.name, STORE_MODULE.actions),
    searchData(){
      this.queryObject.parameters.appId = this.appId;
      this.queryObject.parameters.keyword = this.keyword;
      this.query();
    },
    closeDialog(){
    },
    resetForm(){
      for(var name in this.editItem)
        this.editItem[name] = null;
    },
    add(){
      this.resetForm();
      this.showEdit = true;
      this.createNew = true;
    },
    edit(row){
      this.resetForm();
      for(var name in this.editItem)
        this.editItem[name] = row[name];
      this.showEdit = true;
      this.createNew = false;
    },
    save(){
      this.editItem.appId = this.appId;
      let task = this.createNew ? this.create(this.editItem) : this.update(this.editItem);
      task.then((response) => {
        if (response.success){
          alert("保存成功","消息","success", ()=>{this.showEdit = false; this.createNew = true;});

        }
      });
    },
    clearConditions(){
      if (this.queryObject.parameters.keyword != this.keyword) this.searchData();
    },
    remove(row){
      confirm('确认要删除['+row.moduleName+']吗？请谨慎操作！', '警告', 'warning', ()=>{

        this.delete(row.moduleId).then((response) => {
          if (!response.success) {
            let msg = response.message || "操作失败";
            alert(msg,"消息","error");
          }
        });
      });
    },
    addAction(module){
      this.newAction = true;
      this.showActionEdit = true;
      this.currentModule = module;
      this.currentModuleActionDto.moduleId = module.moduleId;
    },
    editAction(module, action){
      this.newAction = false;
      this.showActionEdit = true;
      this.currentModule = module;
      this.currentModuleActionDto.actionId = action.actionId;
      this.currentModuleActionDto.actionName = action.actionName;
      this.currentModuleActionDto.uri = action.uri;
      this.currentModuleActionDto.moduleId = module.moduleId;

    },
    saveAction(){
      this.currentModule.actions = this.currentModule.actions || [];
      let result = this.newAction ? this.createAction(this.currentModule, this.currentModuleActionDto): this.updateAction(this.currentModule, this.currentModuleActionDto);
      result.then(response => {
        if (response.success){
          this.showActionEdit = false;
        }
        else{
          let msg = response.message || "操作失败";
          alert(msg,"消息","error");
        }

      });
    },
    actionEditorClosed(){
      this.currentModule = {};
      this.currentModuleActionDto = {
        actionId: null,
        actionName: null,
        uri: null,
        moduleId: null
      };
    },
    createAction(module, actionDto){
      return this.$service.app.createModuleAction({data: actionDto}).then(r =>{
        if(r.success){
          module.actions.push(r.data);
        }
        return r;
      });
    },
    updateAction(module, actionDto){
      return this.$service.app.updateModuleAction({data: actionDto}).then(r =>{
        if(r.success){
          let editing = module.actions.singleOrDefault(a => a.actionId == actionDto.actionId);
          for(var name in editing)
            editing[name] = r.data[name];
        }
        return r;
      });
    },
    removection(module, action){
      confirm('确认要删除['+action.actionName+']吗？请谨慎操作！', '警告', 'warning', ()=>{

        this.$service.app.deleteModuleAction({data: [action.actionId]}).then(r =>{
          if(r.success){
            // this.getModuleActions(module);
            module.actions.remove(item => item.actionId == action.actionId);
          }
          else{
            let msg = response.message || "操作失败";
            alert(msg,"消息","error");
          }
        });
      });
    },
    getModuleActions(module){
      this.$service.app.moduleActions({params:{moduleId: module.moduleId}}).then(r => {
        if (r.success)
          module.actions = r.data;
      });
    },
    goBack(){

      this.$router.push({name:'appRoot'})
    }
  }
}
</script>
